<!--
  -- 描述：各局警力占比图
  -- 标签参数：cid（必填，ID，用来方法里区分统计图）、startTime、endTime、prepType、chartTitle、subText
  --
  -- 作者：cyq
  -- 时间：2018/10/21 23:10
-->
<template>
  <div style="position: relative;width: 100%;height: 100%;">
    <div :id="cid" style="width:100%;height:100%;"></div>
  </div>
</template>

<script>
  // 引入 ECharts 主模块
  import echarts from 'echarts/lib/echarts'
  import 'echarts/theme/shine'
  // 引入饼状图
  import 'echarts/lib/chart/bar'
  // 引入提示框和标题组件
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'

  export default {
    name: "OrgPoliceBar",
    props: ['cid','startTime','endTime','chartTitle','subText','prepType'],
    data() {
      return {
        // 统计图对象
        chartObj: null,
        // 查询统计参数
        params: {
          startTime: this.startTime||this.$moment().format('YYYY-MM-DD 00:00:00'),
          endTime: this.endTime||this.$moment().format('YYYY-MM-DD 23:59:59'),
          prepType: this.prepType
        },
        //
        dataList: []
      }
    },
    mounted: function(){
      window.addEventListener('resize',() => this.resize(), false);
    },
    beforeDestroy: function(){
      window.removeEventListener('resize', this.resize(), false);
    },
    methods: {
      resize: function(){
        if(this.chartObj)
          this.chartObj.resize()
      },
      query: function(){
        if(this.startTime)
          this.params.startTime = this.startTime;
        if(this.endTime)
          this.params.endTime = this.endTime;
        if(this.prepType)
          this.params.prepType = this.prepType;
        this.api.post('/preparation/countOrgPolice', this.params)
          .then((data) => {
            if(data.code===200){
              this.dataList = data.data;
              this.initChart();
            }else{
              this.$message.error(data.message);
            }
          });
      },
      initChart() {
        let _totalList = [];
        let _totalPrepList = [];
        let _labelList = [];
        this.dataList.forEach((item) => {
          _labelList.push(item.SHORTNAME);
          _totalList.push(item.TOTAL);
          _totalPrepList.push(item.TOTALPREP);
        });

        let labelOption = {
          normal: {
            show: true,
            position: 'insideBottom',
            distance: 15,
            align: 'left',
            verticalAlign: 'middle',
            rotate: 90,
            formatter: '{c}  {name|{a}}',
            fontSize: 16,
            rich: {
              name: {
                textBorderColor: '#fff'
              }
            }
          }
        };

        if(!this.chartObj)
          this.chartObj = echarts.init(document.getElementById(this.cid));

        let option = {
          title: {
            text: this.chartTitle||'各局警力占比图',
            subtext: this.subText||'今日',
            textStyle: {
              fontWeight: 'bold'
            }
            // ,show: this.showTitle?true:false
          },
          grid: {
            left: 40,
            right: 40,
            bottom: 40
          },
          color: ['#4cabce', '#e5323e'],
          tooltip: {
            trigger: 'axis',
            confine: true,
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['总警力', '已报备']
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              axisTick: {show: false},
              data: _labelList
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '总警力',
              type: 'bar',
              barGap: 0,
              label: labelOption,
              data: _totalList
            },
            {
              name: '已报备',
              type: 'bar',
              label: labelOption,
              data: _totalPrepList
            }
          ]
        };

        this.chartObj.setOption(option);
      }
    }
  }
</script>

<style scoped>

</style>
